<template>
  <div>
    <div class="head">
      <el-button :icon="Icon.Search" @click="showForm">商品搜索</el-button>
      <el-button :icon="Icon.CirclePlus" @click="addForm">商品登记</el-button>
      <el-button :icon="Icon.Edit" @click="updateForm">商品编辑</el-button>
      <el-button :icon="Icon.Delete" @click="deleteForm">商品删除</el-button>
    </div>
    <el-dialog v-model="isShowForm"  class="formclass" draggable width="600px">
      <el-form
          :model="searchForm"
          label-width="100px"
      >
        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="searchForm.goodName" placeholder="请输入商品名称"/>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品分类" prop="goodType">
              <el-select v-model="searchForm.goodType" clearable="true" filterable fit-input-width="true" placeholder="请选择商品分类" prop="goodType"
                         style="width: 145px" @change="getType">
                <el-option
                    v-for="item in goodValue.type"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="供应商" prop="vendor">
              <el-select v-model="searchForm.vendor" clearable="true" filterable fit-input-width="true" placeholder="请选择供应商"
                         prop="vendor" style="width: 250px">
                <el-option
                    v-for="item in vendorList"
                    :key="item.vendorId"
                    :label="item.vendorName"
                    :value="item.vendorName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="cancelExpert">取消</el-button>
            <el-button type="primary" @click="searchOk">确认</el-button>
        </span>
      </template>
    </el-dialog>


    <el-dialog v-model="isShowAddOrUpdateForm"  class="formclassTwo" draggable width="600px">
      <div>
        <el-form
            :model="addOrUpdateForm"
            :rules="rule"
            label-width="100px"
            ref="form"
        >
          <el-form-item label="商品名称" prop="goodName">
            <el-input v-model="addOrUpdateForm.goodName" placeholder="请输入商品名称"/>
          </el-form-item>

          <el-row>
            <el-col :span="15">
              <el-form-item label="商品分类" prop="goodType">
                <el-select v-model="addOrUpdateForm.goodType" clearable="true" filterable fit-input-width="true" placeholder="请选择商品分类"
                           prop="goodType" style="width: 240px">
                  <el-option
                      v-for="item in goodValue.type"
                      :key="item"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计量单位" prop="measure">
                <el-select v-model="addOrUpdateForm.measure" clearable="true" filterable fit-input-width="true" placeholder="请选择计量单位"
                           prop="measure" style="width: 120px">
                  <el-option
                      v-for="item in goodValue.measure"
                      :key="item"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item label="供应商" prop="vendor">
                <el-select v-model="addOrUpdateForm.vendor" clearable="true" filterable fit-input-width="true" placeholder="请选择供应商"
                           prop="vendor" style="width: 250px">
                  <el-option
                      v-for="item in vendorList"
                      :key="item.vendorId"
                      :label="item.vendorName"
                      :value="item.vendorName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="商品价格" prop="goodPrice">
            <el-input v-model="addOrUpdateForm.goodPrice" placeholder="请输入商品价格"/>
          </el-form-item>
          <el-form-item label="折扣" prop="discount">
            <el-input v-model="addOrUpdateForm.discount" placeholder="请输入折扣"/>
          </el-form-item>
          <el-form-item label="商品成本" prop="costPrice">
            <el-input v-model="addOrUpdateForm.costPrice" placeholder="请输入商品成本"/>
          </el-form-item>
          <el-form-item label="厂商" prop="manufacturers">
            <el-input v-model="addOrUpdateForm.manufacturers" placeholder="请输入厂商"/>
          </el-form-item>
          <el-form-item label="保质期限" prop="expirationDate">
            <el-input v-model="addOrUpdateForm.expirationDate" placeholder="请输入保质期限"/>
          </el-form-item>
          <el-form-item label="可否退货" prop="isReturn">
            <el-radio-group v-model="addOrUpdateForm.isReturn" class="ml-1">
              <el-radio label="0" size="large">否</el-radio>
              <el-radio label="1" size="large">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="可否换货" prop="isReplacement">
            <el-radio-group v-model="addOrUpdateForm.isReplacement" class="ml-2">
              <el-radio label="0" size="large">否</el-radio>
              <el-radio label="1" size="large">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <el-input v-model="addOrUpdateForm.note" placeholder="请输入备注"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelExpert">取消</el-button>
          <el-button type="primary" @click="addOrUpdate">确认</el-button>
        </span>
      </template>
    </el-dialog>


    <el-divider></el-divider>
    <el-scrollbar>
      <el-table ref="multipleTable"
                :data="tableData"
                border
                height="542px"
                row-style="height:50px"
                stripe style=" width: 100%"
                tooltip-effect="dark"
                @select="select"
                @selection-change="handleSelection">
        <el-table-column type="selection" width="39"></el-table-column>
        <el-table-column :index="getIndex" label="序号" type="index" width="60"/>
        <el-table-column label="商品代码"  prop="goodId" width="360"/>
        <el-table-column label="商品名称" prop="goodName" width="226px"/>
        <el-table-column label="商品分类" prop="goodType" width="140px"/>
        <el-table-column label="计量单位" prop="measure" width="83px"/>
        <el-table-column label="商品价格(单位:元)" prop="goodPrice" width="139px"/>
        <el-table-column label="折扣" prop="discount" width="74px"/>
        <el-table-column label="成本价" prop="costPrice" sortable width="100px"/>
        <el-table-column fixed="right" label="操作" prop="">
          <template #default="scope">
            <el-button  color="#97d578" plain  round size="default" @click="look(scope.row)">其他信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page=pageNow
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          :total=totalSize
          background
          layout="total, prev, pager, next"
          style="margin-top: 15px"
          @current-change="pageChange"
      >
      </el-pagination>

      <el-dialog v-model="Visible" center title="其他信息" width="60%">
        <div style="margin-left: 5px;margin-bottom: 6px">
          <span style="font-size: 15px">商品信息:</span>
        </div>
        <el-table :data="rowData" border>
          <el-table-column label="保质期限" prop="expirationDate" width="89px"/>
          <el-table-column label="可否退货" prop="isReturn" width="88px"/>
          <el-table-column label="可否换货" prop="isReplacement" width="88px"/>
          <el-table-column label="产商" prop="manufacturers" width="200px"/>
          <el-table-column label="供应商" prop="vendor" width="200px"/>
          <el-table-column label="备注" prop="note" width="150px"/>
        </el-table>
      </el-dialog>
    </el-scrollbar>
  </div>


</template>

<script>
import Header from "@/components/Header";
import {MoreFilled,Edit,CirclePlus,Search,Delete} from "@element-plus/icons-vue";
import axios from "axios";
import {ElMessage, ElNotification} from "element-plus";
import {request_user} from "@/util/request";
export default {
  name: "GoodsManage",
  data() {
    return {
      Icon:{Search,CirclePlus,Edit,MoreFilled,Delete},
      tableData:[
      ],
      rowData:[
      ],
      pageSize:10,
      totalSize:100,
      pageNow:1,
      vendorName:'',
      zip:'',
      goodCondition:{
        goodName:''
      },
      searchForm:{
        goodName:'',
        goodType:'',
        isReturn:'',
        isReplacement:'',
        vendor:''
      },
      addOrUpdateForm:{
        goodId:'',
        goodName:'',
        goodType:'',
        measure:'',
        goodPrice:'',
        discount:'',
        costPrice:'',
        manufacturers:'',
        expirationDate:'',
        isReturn:'',
        isReplacement:'',
        vendor:'',
        note:'',
      },
      isShowForm:false,
      isShowAddOrUpdateForm:false,
      isAdd:false,
      goodValue:{
        type:[],
        measure:[]
      },
      vendorList:[],
      measureValue:[],
      Visible:false,
      data:{},
      multipleSelection:[],
      rule:{
        goodName:[{required:true,message:"必填",trigger: 'blur'}],
        goodType:[{required:true,message:"必选",trigger: 'blur'}],
        measure:[{required:true,message:"必选",trigger: 'blur'}],
        goodPrice:[{pattern:/(^[0-9]{1,8}$)|(^[0-9]{1,8}[\\.]{1}[0-9]{1,2}$)/,required:true,message:"请输入最多保留两个小数格式的金额",trigger: 'blur'}],
        discount:[{pattern:/(^0\.\d{2}$)|^1$|(^0\.\d{1}$)/,required:true,message:"请输入0.00或0.0格式的折扣百分比，包含1",trigger: 'blur'}],
        costPrice:[{pattern:/(^[0-9]{1,8}$)|(^[0-9]{1,8}[\\.]{1}[0-9]{1,2}$)/,required:true,message:"请输入最多保留两个小数格式的金额",trigger: 'blur'}],
        manufacturers:[{required:true,message:"必填",trigger: 'blur'}],
        expirationDate:[{required:true,message:"必填",trigger: 'blur'}],
        isReturn:[{required:true,message:"必选",trigger: 'blur'}],
        isReplacement:[{required:true,message:"必选",trigger: 'blur'}],
        vendor:[{required:true,message:"必选",trigger: 'blur'}],
        note:''
      },
    }
  },
  methods:{

    cancelExpert() {
      this.isShowForm = false
      this.isShowAddOrUpdateForm = false
      ElNotification.success({
        title:'取消操作',
        offset: 100,
      })
      this.loadPost()
    },
    addOrUpdate(){
      console.log("测试:"+this.isAdd)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(this.isAdd)
          if(this.isAdd){
            this.$axios.post("http://localhost:1080/goods",{
              goodId:'',
              goodName:this.addOrUpdateForm.goodName,
              goodType:this.addOrUpdateForm.goodType,
              measure:this.addOrUpdateForm.measure,
              goodPrice:this.addOrUpdateForm.goodPrice,
              discount:this.addOrUpdateForm.discount,
              costPrice:this.addOrUpdateForm.costPrice,
              manufacturers:this.addOrUpdateForm.manufacturers,
              expirationDate:this.addOrUpdateForm.expirationDate,
              isReturn:this.addOrUpdateForm.isReturn,
              isReplacement:this.addOrUpdateForm.isReplacement,
              vendor:this.addOrUpdateForm.vendor,
              note:this.addOrUpdateForm.note,
            }).then(res=>{
              this.loadPost()
              res=res.data
              if (res.code == '200'){
                this.$message({
                  type: 'success',
                  message: '登记成功!'
                });
              }else if (res.code == '10010'){
                this.$message({
                  type: 'warning',
                  message: res.msg
                });
              }else {
                this.$message({
                  type: 'error',
                  message: '登记失败!'
                });
              }
            })

          }else {
            this.$axios.put("http://localhost:1080/goods",{
              goodId:this.addOrUpdateForm.goodId,
              goodName:this.addOrUpdateForm.goodName,
              goodType:this.addOrUpdateForm.goodType,
              measure:this.addOrUpdateForm.measure,
              goodPrice:this.addOrUpdateForm.goodPrice,
              discount:this.addOrUpdateForm.discount,
              costPrice:this.addOrUpdateForm.costPrice,
              manufacturers:this.addOrUpdateForm.manufacturers,
              expirationDate:this.addOrUpdateForm.expirationDate,
              isReturn:this.addOrUpdateForm.isReturn,
              isReplacement:this.addOrUpdateForm.isReplacement,
              vendor:this.addOrUpdateForm.vendor,
              note:this.addOrUpdateForm.note,
            }).then(res=>{
              this.loadPost()
              res=res.data
              if (res.code == '200'){
                this.$message({
                  type: 'success',
                  message: res.msg
                });
              }else if (res.code == '10009'){
                this.$message({
                  type: 'warning',
                  message: res.msg
                });
              }else {
                this.$message({
                  type: 'error',
                  message: '修改失败!'
                });
              }

            })

          }
          this.isShowAddOrUpdateForm = false
        }else {
          ElMessage('请将信息补充完整')
          return false;
        }
      })
      this.loadPost()

    },
    resetForm(formName) {
      this.addOrUpdateForm = {
        goodId:'',
        goodName:'',
        goodType:'',
        measure:'',
        goodPrice:'',
        discount:'',
        costPrice:'',
        manufacturers:'',
        expirationDate:'',
        isReturn:'',
        isReplacement:'',
        vendor:'',
        note:'',
      }
      if (this.isAdd){
        this.$refs[formName].clearValidate();
      }
      // this.$refs[formName].resetFields();

    },
    searchOk(){
      this.$axios.post("http://localhost:1080/goods/page",{
        pageNow:this.pageNow,
        pageSize:this.pageSize,
        goodName:this.searchForm.goodName,
        goodType:this.searchForm.goodType,
        vendor:this.searchForm.vendor
      }).then(res=>{
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          for (let i = 0;i<this.tableData.length;i++){
            this.tableData[i].select = false;
          }
          this.$message({
            type: 'success',
            message: '查询成功!'
          });
        }else {
          this.$message({
            type: 'error',
            message: '查询失败!'
          });
          this.tableData = []
          this.totalSize = 0
        }

      })
      this.isShowForm = false
    },
    look(row){
      console.log(row)
      this.rowData = []
      this.rowData.push(row)
      this.Visible = true

    },
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1080/goods/page",{
        pageNow:this.pageNow,
        pageSize:this.pageSize,
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          for (let i = 0;i<this.tableData.length;i++){
            this.tableData[i].select = false;
          }
          console.log(res.data)
        }else {
          this.tableData = []
          this.totalSize = 0
        }

      })
    },
    loadPost(){
      this.$axios.post("http://localhost:1080/goods/page",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          for (let i = 0;i<this.tableData.length;i++){
            this.tableData[i].select = false;
          }
          console.log(res.data)
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },
    showForm(){
      this.isShowForm = true
      this.searchForm = {goodName:'',
        goodType:'',
        isReturn:'',
        isReplacement:'',
        vendor:''}
    },
    loadGet(){
      this.$axios.get("http://localhost:1080/goods").then(res=>{
        res = res.data
        if (res.code == '200'){
          this.goodValue.type = res.data.type
          this.goodValue.measure = res.data.measure
          console.log(res.data.type)
        }else {
          this.typeValue = []
        }
      })
    },
    loadGetVendor(){
      this.$axios.get("http://localhost:1080/vendor").then(res=>{
        res = res.data
        if (res.code == '200'){
          this.vendorList = res.data
          console.log(res.data)
        }else {
          this.vendorList = []
        }
      })
    },
    getType(value){
      console.log(value)
      this.searchForm.goodType = value
    },
    addForm(){
      this.resetForm('form')
      this.isAdd = true
      this.showAddOrUpdateForm()
      this.resetForm('form')
    },
    updateForm(){
      this.resetForm('form')
      this.isAdd = false
      console.log("this.multipleSelection--")
      console.log(this.multipleSelection)
      if (this.multipleSelection!=undefined&&this.multipleSelection.goodId != undefined){
        let row = this.multipleSelection
        this.addOrUpdateForm.goodId = row.goodId
        this.addOrUpdateForm.goodName = row.goodName
        this.addOrUpdateForm.goodType = row.goodType
        this.addOrUpdateForm.measure = row.measure
        this.addOrUpdateForm.goodPrice= row.goodPrice
        this.addOrUpdateForm.discount = row.discount
        this.addOrUpdateForm.costPrice = row.costPrice
        this.addOrUpdateForm.manufacturers = row.manufacturers
        this.addOrUpdateForm.expirationDate = row.expirationDate
        this.addOrUpdateForm.vendor = row.vendor
        this.addOrUpdateForm.note = row.note
        if (row.isReturn == '否'){
          this.addOrUpdateForm.isReturn = '0'
        }else {
          this.addOrUpdateForm.isReturn = '1'
        }
        if (row.isReplacement == '否'){
          this.addOrUpdateForm.isReplacement = '0'
        }else {
          this.addOrUpdateForm.isReplacement = '1'
        }
        this.showAddOrUpdateForm()
      }else {
        ElMessage('请先选择要修改的商品！')
      }

    },
    deleteForm(){
      console.log("this.multipleSelection--")
      console.log(this.multipleSelection)

      if (this.multipleSelection!=undefined&&this.multipleSelection.goodId != undefined){
        let row = this.multipleSelection
        this.$confirm('此操作将永久删除商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post("http://localhost:1080/goods/delete",{
            goodId: row.goodId
          }).then(res=>{
            this.loadPost()
            res=res.data
            if (res.code == '200'){
              this.$message({
                type: 'success',
                message: '删除成功'
              });
            }else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }

          })

        }).catch(() => {
          ElNotification.success({
            title: '取消操作',
            message: '已取消删除',
            offset: 100,
          })
        });
      }else {
        ElMessage('请先选择要删除的商品！')
      }
    },
    showAddOrUpdateForm(){
      this.isShowAddOrUpdateForm = true
    },
    handleSelection(selection){
      this.multipleSelection = selection[0]
    },
    select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },




  },//methods

  beforeMount() {
    this.loadPost()
    this.loadGet()
    this.loadGetVendor()

  }
}


</script>

<style scoped>
body .el-table th.gutter {
  display: table-cell !important
}
.co1{
  background: #77c7d0;

}
.co2{
  background: #d9bf17;
}
.oo{
  background: #97d578
}
.formclass{
  border-radius: 20px;
}
.formclassTwo{
  border-radius: 20px;
}
.head{
  margin: 10px 0;
  text-align: left;
}

/deep/.el-table__header-wrapper  .el-checkbox{
  display:none
}
</style>